<template>
  <div>
    <a-card>
      <div :class="advanced ? 'search' : null">
        <a-form layout="horizontal">
          <div :class="advanced ? null : 'fold'">
            <a-row>
              <a-col :md="8" :sm="24">
                <a-form-item label="名称" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input placeholder="分类名称" v-model="inputForm.nickname" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <span style="float: right; margin-top: 3px;">
            <a-button type="primary" @click="getData">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetInputForm">重置</a-button>
            <a @click="toggleAdvanced" style="margin-left: 8px">
              {{ advanced ? '收起' : '展开' }}
              <a-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </span>
        </a-form>
      </div>
      <div>
        <standard-table :columns="columns" :dataSource="dataSource" :selectedRows.sync="selectedRows" @clear="onClear"
          @change="onChange" :pagination="{ ...pagination, onChange: onPageChange }"
          @selectedRowChange="onSelectChange">
          <div slot="description" slot-scope="{text}">
            {{ text }}
          </div>
          <div slot="action" slot-scope="{text, record}">
            <a style="margin-right: 8px" @click="editUser(record)">
              <a-icon type="delete" />删除
            </a>
          </div>
          <template slot="statusTitle">
            <a-icon @click.native="onStatusTitleClick" type="info-circle" />
          </template>
        </standard-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import { request } from '@/utils/request'
import moment from 'moment';
const columns = [
  {
    title: '编号',
    dataIndex: 'key'
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '级别',
    dataIndex: 'rank'
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    sorter: true,
    customRender: (text) => {
      return moment(text).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'QueryList',
  components: { StandardTable },
  data() {
    return {
      advanced: true,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      inputForm: {
        username: "",
        nickname: "",
        status: "",
        mobile: "",
        createAt: ""
      },
      visible: false,
      userInfo: {}
    }
  },
  authorize: {
    deleteRecord: 'delete'
  },
  mounted() {
    this.getData()
  },
  methods: {
    closeDrawer() {
      this.visible = false
      this.userInfo = {}
    },
    editUser(record) {
      request(process.env.VUE_APP_API_BASE_URL1 + '/category/' + record.id, 'delete', {
      }).then(res => {
        if (res.data.code == 200) {
          this.getData()
        }
      })
    },
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.pagination.pageSize = pageSize
      this.getData()
    },
    getData() {
      request(process.env.VUE_APP_API_BASE_URL1 + '/category', 'get', {
        title: this.inputForm.nickname,
      }).then(res => {
        const list = res.data.data
        let dataSource = []
        if (list) {
          list.forEach(item => {
            item['key'] = item.id
            if (item.pid == 0 && item.picture == "") {
              // 一级分类
              item['rank'] = '一级分类'
            } else if (!item.picture) {
              item['rank'] = '二级分类'
            } else {
              item['rank'] = '三级分类'
            }
            dataSource.push(item)
          });
          this.$message.success('查询信息成功')
        } else {
          // this.$message.error('未找到相对应的数据，请检查搜索条件')
        }
        this.dataSource = dataSource
      })
    },
    convertToTimestamp(datetime) {
      if (datetime != "") {
        const date = new Date(datetime);
        let timestamp = Math.floor(date.getTime());
        timestamp = moment(timestamp).startOf('day').unix()
        return timestamp
      }
      return ""
    },
    resetInputForm() {
      this.inputForm = {}
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key)
      this.selectedRows = this.selectedRows.filter(item => item.key !== key)
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    remove() {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange(e) {
      console.log('e :>> ', e);
      // this.$message.info('表格状态改变了')
    },
    onSelectChange() {
      // this.$message.info('选中行改变了')
    },
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block
}

.operator {
  margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
